<template>
	<view class="navbar" :style="{'background':background, 'height':navbarHeight + 'px'}">
		  <view :style="{'height':capsuleHeight + 'px', 'top': capsuleTop + 'px' }" class="arrow-content">
		    <view class="arrow" v-if="isShowArrow" @click="handleGoToBack"></view>
			 <view class="home" v-if="ishome" @click="gotoadmin">
				<u-icon name="home-fill" size="38"></u-icon>
			 </view>
		  </view>
		  <view class="text" :style="{ 'height': capsuleHeight + 'px', 'top': capsuleTop + 'px' }">{{title}}</view>
		</view>
		<view class="title-search" :style="{marginTop:navbarHeight+'px'}">
			<u-search placeholder="请输入内容" v-model="keyword" class="inpsearcg" bg-color='#eaeaea'
				:action-style="{ color: '#71C592', fontSize: '30rpx' }" @custom='changeinp'></u-search>
			<image src="../static/img/bg.jpg" mode="widthFix" class="image"></image>
		</view>

</template>

<script setup>
	const keyword=ref('')
	const capsuleTop=ref(0)//胶囊距离屏幕顶部的距离
	const capsuleHeight=ref(0)//胶囊高度
	const navbarHeight=ref(0)//导航栏高度
	// #ifdef MP-WEIXIN
 onLoad(()=>{
	
	 const App = getApp()
	 	
	   	capsuleTop.value = App.globalData.capsule.top, 
	  capsuleHeight.value = App.globalData.capsule.height, 
	  navbarHeight.value = (App.globalData.capsule.top - App.globalData.system.statusBarHeight) * 2 + App.globalData.capsule.height + App.globalData.system.statusBarHeight
 })	
	// #endif
	const props=defineProps({
		title:{
			type:String,
			default:"社区",
		},
		   background:{
		      type: String,
		      default: '#71C592',
		    },
			isShowArrow:{
			   type: Boolean,
			    default: true,
			    },
				ishome:{
					type: Boolean,
					 default: true,
				}
	})
const handleGoToBack=(e)=>{
	console.log(e);
}
const changeinp=(e)=>{
	console.log(e);
}


</script>

<style lang="scss" scoped>
	.navbar{
	  width: 100%;
	  //设置导航栏固定在顶部
	  position: fixed;
	  top: 0;
	  z-index: 99;
	
	}
	.arrow-content{
	  position: absolute;
	  left: 40rpx;
	  z-index: 999;
	  display: flex;
	  align-items: center;
	}
	.arrow{
	  width: 20rpx;
	  height: 20rpx;
	  border: 5rpx solid #FFFFFF;
	  border-right-color:transparent;
	  border-bottom-color:transparent;
	  transform: rotate(-45deg);
	}
	.text{
	  position: absolute;
	  left: 0;
	  right: 0;
	  font-size: 28rpx;
	  color: #FFFFFF;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

.home{
	margin: 0 10rpx;
}
	.title-search {
		height: 500rpx;

		.inpsearcg {
			height: 50px;
			width: 100%;
			margin: 5rpx;
		}

		.image {
			height: 400rpx;
			width: 100%;
		}
	}
</style>